<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!--{include file='comm/header.tpl'}-->
    <title>角色列表</title>
    <!--{include file="comm/icheck.tpl"}-->
    <style type="text/css">
        .permission_box div.fl {
            margin-right: 10px;
            margin-bottom: 10px;
            width: 175px;
        }
    </style>
</head>
<body>

<div class="container">

        <div class="comm_content">

            <div  class="search-box">
                <div style="position:relative">
                    <form class="form-inline" id="searchForm" onsubmit="return false;">
                        <table>
                            <tr>
                                <td>
                                    <span>
                                        角色组 ：<select class="form-control" id="s_roleGroupID" name="s_roleGroupID" >
                                            <option value="">请选择</option>
                                            <!--{foreach from=$role_group_array item=role_group}-->
                                            <option value="<!--{$role_group.roleGroupID}-->"><!--{$role_group.roleGroupName}--></option>
                                            <!--{/foreach}-->
                                        </select>
                                    </span>
                                    <span><input type="button" class="btn btn-primary" value="查询" onclick="role.search();"></span>
                                    <span><input type="button" class="btn btn-warning" value="重置" onclick="role.reset();"></span>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>

            <table id="flex" style="display:none"></table>

        </div>

</div>


<div id="pop" style="display: none;">

    <form class="form-horizontal" id="editForm" onsubmit="return false;">

        <div class="form-group">
            <label for="roleGroupID" class="col-sm-3 control-label"><span class="red">*</span> 角色组：</label>
            <div class="col-sm-9">
                <select class="form-control w150" id="roleGroupID" name="roleGroupID">
                    <option value="0">请选择</option>
                    <!--{foreach from=$role_group_array item=role_group}-->
                        <option value="<!--{$role_group.roleGroupID}-->"><!--{$role_group.roleGroupName}--></option>
                    <!--{/foreach}-->
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="roleName" class="col-sm-3 control-label"><span class="red">*</span> 角色名称：</label>
            <div class="col-sm-9">
                <input type="text" class="form-control w300" id="roleName" name="roleName" />
                <input type="hidden" id="roleID" name="roleID" value="0" />
            </div>
        </div>

        <div class="form-group">
            <label for="memo" class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-9">
                <textarea class="form-control w300" id="memo" name="memo" placeholder="请输入备注"></textarea>
            </div>
        </div>

    </form>

</div>

<div id="permission_popup" style="display: none;">

    <form class="form-horizontal" id="permissionForm" onsubmit="return false;">

        <ul class="nav nav-tabs" role="tablist">
            <!--{foreach from=$permission_group_array item=group name=foo}-->
            <li class="group_box <!--{if $smarty.foreach.foo.index == 0}--> active<!--{/if}-->">
                <a href="#"><!--{$group.permissionGroupName}--></a>
            </li>
            <!--{/foreach}-->
        </ul>

        <!--{foreach from=$permission_group_array item=group name=foo}-->
            <div class="permission_box<!--{if $smarty.foreach.foo.index != 0}--> hide<!--{/if}-->" id="group_<!--{$group.permissionGroupID}-->" style="margin-top: 10px;">

                <!--{foreach from=$group.permission_list item=permission}-->
                <div class="fl">
                    <input type="checkbox" class="square-checkbox" id="square-checkbox-<!--{$permission.permissionID}-->" name="permission_box" value="<!--{$permission.permissionID}-->">
                    <label for="square-checkbox-<!--{$permission.permissionID}-->"><!--{$permission.permissionName}--></label>
                </div>
                <!--{/foreach}-->

                <div class="clear" style="margin-bottom: 20px;">
                    <input type="checkbox" class="square-checkbox-checkall" id="checkbox-checkall-<!--{$group.permissionGroupID}-->" value="0">
                    <label for="checkbox-checkall-<!--{$group.permissionGroupID}-->">全选</label>
                </div>

            </div>

        <!--{/foreach}-->

        <input type="hidden" name="p_roleID" id="p_roleID"/>

    </form>

</div>

<script type="text/javascript">

$("#flex").flexigrid({
    url:"/invokingAjax-backend/system/roleList.ajax?operFlg=1",
    dataType: "json",
    colModel : [
        <!--{if $edit_permission}-->
        {display: "操作", width : 150, align: 'center'},
        <!--{/if}-->
        {display: "角色ID", name : "roleID" , width : 100 , sortable : true },
        {display: "角色名称", width : 150},
        {display: "角色组名称", width : 150},
        {display: "备注", width : 150}
    ],
    <!--{if $edit_permission}-->
    buttons : [
        {name: "添加", bclass: "add", onpress : "role.edit.open"},
        {separator: true},
        {name: "删除", bclass: "delete", onpress : "role.del.check"},
        {separator: true},
        {name: "全选", bclass: "checkAll", onpress : "E.checkAllList"},
        {separator: true},
        {name: "取消全选", bclass: "cancelCheckAll", onpress : "E.cancelCheckAllList"}
    ],
    <!--{/if}-->
    sortname: "roleID",
    sortorder: "DESC",
    usepager: true,
    rp: 10,
    useRp: true,
    showTableToggleBtn: true
});


var role = {

    search: function() {
        var dt = $('#searchForm').serializeArray();
        $("#flex").flexOptions({newp: 1, params: dt}).flexReload();
    },

    reset: function() {
        $('#s_roleGroupID').val('');
        this.search();
    },

    //查询角色详细信息
    detail: {

        search: function( id ) {

            E.loadding.open('正在查询，请稍候...');

            E.ajax_get({
                url: "/invokingAjax-backend/system/roleList.ajax?operFlg=2",
                data: {
                    id: id
                },
                call: "role.detail.result"
            });

        },

        result: function( o ) {

            E.loadding.close();

            if (o.code == 200) {
                $('#roleGroupID').val(o.data.roleGroupID.toString());
                $('#roleID').val(o.data.roleID);
                $('#roleName').val(o.data.roleName);
                $('#memo').val(o.data.memo);
            } else {
                E.popup.close();
                E.alert(o.message);
            }

        }

    },

    edit: {

        open: function( id ) {

            if (!id) id = 0;

            E.popup.open({
                id:"pop",
                title: id == 0 ? '新增角色' : '修改角色',
                css: "width: 600px;",
                btnName: "保存",
                btnCall:"role.edit.check();" //
            });

            if (id > 0) {
                role.detail.search( id );
            }

        },

        check: function() {

            this.dt = E.getFormValues('editForm');
            var error_msg = '';

            if (this.dt.roleGroupID == 0) {
                error_msg += '请选择角色组<br>';
            }
            if (E.isEmpty(this.dt.roleName)) {
                error_msg += '角色名称不能为空';
            }

            if (error_msg != '') {
                E.alert(error_msg);
            } else {
                E.confirm('您确认要保存角色信息吗？', 'role.edit.execute')
            }

        },

        execute: function() {

            E.loadding.open('正在保存，请稍候...');

            E.ajax_get({
                url: "/invokingAjax-backend/system/roleList.ajax?operFlg=100&act=edit",
                data: this.dt,
                call: "role.edit.result"
            });

        },

        result: function( o ) {

            E.loadding.close();

            if (o.code == 200) {

                role.load();

                if (this.dt.roleID > 0) {

                    E.alert(o.message, 2, 'E.popup.close');

                } else {

                    document.getElementById('editForm').reset();
                    E.alert(o.message, 2);

                }
            } else {

                E.alert(o.message);

            }

        }

    },

    del: {

        r_array: "",

        check: function(){

            //获取选中的行的行数
            var selected_count=$('.trSelected',flex).length;
            if (selected_count==0) {
                E.alert('请选择要删除的角色');
            } else {
                this.r_array = new Array();
                for(var i=0; i<selected_count; i++){
                    var typeIDStr = $('.trSelected',flex).eq(i).attr('id');
                    this.r_array.push(typeIDStr.substr(3));
                }

                //弹出确认层
                E.confirm("您确认要删除已选择的角色吗？", "role.del.execute");

            }
        },

        execute: function() {

            E.loadding.open('正在删除，请稍候...');

            E.ajax_get({
                url: "/invokingAjax-backend/system/roleList.ajax?operFlg=100&act=del",
                data:{
                    r_array: this.r_array
                },
                call: "role.del.result"
            });

        },

        result: function( o ) {

            E.loadding.close();

            if (o.code == 200) {
                E.alert(o.message, 2, 'role.load');
            } else {
                E.alert(o.message);
            }

        }

    },

    permission: {

        search: function( roleID ) {

            E.loadding.open('正在查询，请稍候...');

            E.ajax_get({
                url: "/invokingAjax-backend/system/roleList.ajax?operFlg=3",
                data:{
                    id: roleID
                },
                call: "role.permission.open"
            });

            this.roleID = roleID;

        },

        open: function( o ) {

            E.loadding.close();

            E.popup.open({
                id:"permission_popup",
                title: '选择权限',
                css: "width: 800px;",
                btnName: "保存",
                btnCall:"role.permission.check();" //
            });

            $('.square-checkbox').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });

            $('.square-checkbox-checkall').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });


            if (o.code == 200) {
                $.each(o.data, function(k, v) {
                    $('#square-checkbox-' + k).iCheck('check');
                });
            }

            $('#p_roleID').val(this.roleID);

        },

        check: function() {

            this.dt = E.getFormValues('permissionForm');

            if (this.dt.permission_box.length == 0) {
                E.alert('请选择权限');
            } else {
                E.confirm('您确认要保存角色权限吗？', 'role.permission.execute')
            }

        },

        execute: function() {

            E.loadding.open('正在保存，请稍候...');

            E.ajax_post({
                url: "/invokingAjax-backend/system/roleList.ajax?operFlg=100&act=permisstion",
                data: this.dt,
                call: "role.permission.result"
            });

        },

        result: function( o ) {

            E.loadding.close();

            if (o.code == 200) {
                E.alert('角色权限保存成功，重新登录后生效', 2, 'E.popup.close');
            } else {
                E.alert(o.message);
            }

        }

    },

    load: function() {
        $("#flex").flexReload();
    }

};

$(window).ready(function() {

    $(document).on('click', '.group_box', function() {

        var index = $(this).index();

        $('.group_box').removeClass('active').eq(index).addClass('active');
        $('.permission_box').addClass('hide').eq(index).removeClass('hide');
        $('.permission_box_checkall').addClass('hide').eq(index).removeClass('hide');

    });

    $(document).on('ifChecked', '.square-checkbox-checkall', function() {
        var id = $(this).attr('id').replace('checkbox-checkall-', '');
        $('#group_' + id).find('.square-checkbox').iCheck('check');
    });

    $(document).on('ifUnchecked', '.square-checkbox-checkall', function() {
        var id = $(this).attr('id').replace('checkbox-checkall-', '');
        $('#group_' + id).find('.square-checkbox').iCheck('uncheck');
    });

});

</script>

</body>
</html>